<template>
    <div class="right">
        <div>
            <SceneTree :sceneTree="sceneTree"></SceneTree>
        </div>
        <hr />
        <h3>围栏加载</h3>
        <button @click="createESPolygonFence">电子围栏</button>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue"
import getMyProjectManager from '@/scripts/getMyProjectManager';
import SceneTree from "vue-xe2-plugin/dist-node/components/xe2/common/SceneTree/SceneTree.vue"
import { ESPolygonFence } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const myProjectManager = getMyProjectManager();

myProjectManager._fenceCollection.show = true

// 存储所有的可视化对象
var sceneObjects = []

// 结构树
const sceneTree = myProjectManager.getSceneTree("fenceSceneTree")

// 创建电子围栏
const createESPolygonFence = () => {
    var sceneObj = myProjectManager.createSceneObject(ESPolygonFence)
    if (!sceneObj) return
    sceneObj.editing = true
    sceneObj.height = 30
    sceneObj.name = "围栏"
    sceneObj.materialMode = "scanline"
    sceneObjects.push(sceneObj)
}

// 销毁所有对象
const destroySceneObject = () => {
    if (sceneObjects.length > 0) {
        sceneObjects.forEach(item => {
            myProjectManager.destroySceneObject(item)
            item = undefined
        })
        sceneObjects.length = 0
    }
}
onUnmounted(() => {
    destroySceneObject()
    myProjectManager._fenceCollection.show = false
})

</script>

<style scoped>
.right {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/right/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.right>div {
    width: 100%;
    height: 50%;
}


button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>